<template>
	<el-dialog :title="$t('common.safetyVerifiy')" v-model="visible" width="342">
		<slide-verify :slider-text="props.text" :accuracy="props.accuracy" :imgs="props.imgs" :tipWords="props.tipWords" :passFlag="props.passFlag" @again="onAgain" @success="onSuccess" @fail="onFail" @refresh="onRefresh"></slide-verify>
	</el-dialog>
</template>
<script setup lang="ts">
	import img0 from '@/assets/verify/img.jpg'
	import img1 from '@/assets/verify/img1.jpg'
	import img2 from '@/assets/verify/img2.jpg'
	import img3 from '@/assets/verify/img3.jpg'
	import img4 from '@/assets/verify/img4.jpg'
	import img5 from '@/assets/verify/img5.jpg'

	// 组件懒加载
	const SlideVerify = defineAsyncComponent(() => import('./slide-verify.vue'))
	const visible = ref(false)
	const open = () => (visible.value = true)
	const props = defineProps({
		text: {
			type: String,
			default: lang.global.t('common.safetyText')
		},
		imgs: {
			type: Array,
			default: [img0, img1, img2, img3, img4, img5]
		},
		accuracy: {
			type: Number,
			default: 1
		},
		tipWords: {
			type: String,
			default: ''
		},
		passFlag: {
			type: Boolean,
			default: true
		}
	})
	// 定义用于发射方法
	const emit = defineEmits(['onAgain', 'onSuccess', 'onFail', 'onRefresh'])
	const onAgain = () => emit('onAgain')
	const onSuccess = (times: number) => emit('onSuccess', times)
	const onFail = () => emit('onFail')
	const onRefresh = () => emit('onRefresh')
	defineExpose({ open })
</script>
